<template>
  <div class="YB_WaterLine">
    <svg width="100%" height="100%" :viewBox="`0,0,${viewBoxWidth},${viewBoxHeight}`">
      <line :x1="svgX"  :y1="svgY"  x2="0"  :y2="svgY"></line>
    </svg>
  </div>
</template>
<script>export default {name:'YBWaterLine'}</script>
<script setup>
import { computed } from "vue";

const props = defineProps({
  width:{
    type:Number,
    default:() => 0
  },
  height:{
    type:Number,
    default:() => 0
  },
  background:{
    type:String,
    default:() => '#ffffff'
  },
  lineColor:{
    type:String,
    default:() => '#ffffff'
  },
})
const waterLineWidth = computed(() => props.width + 'px')
const waterLineHeight = computed(() => props.height + 'px')
const viewBoxWidth = computed(() => props.width)
const viewBoxHeight = computed(() => props.height)
const svgX = computed(() => props.width)
const svgY = computed(() => props.height / 2)
const background = computed(() => props.background)
const stroke = computed(() => props.lineColor)
</script>

<style scoped lang="scss">
.YB_WaterLine{
  width: v-bind('waterLineWidth');
  height:v-bind('waterLineHeight');
  background: v-bind('background');

}
svg{
  line{
    animation: dash 1000s linear infinite;
    stroke-dasharray: 40 , 20;
    stroke: v-bind('stroke');
    stroke-width: v-bind('svgY');
  }
}
@keyframes dash {
  to {
    stroke-dashoffset: -200000;
  }
}
</style>